<template>
	<view>
		<view class="MGC-mod">
				<view class="MGC-title">{{ MGCpopup.title }}</view>
				<view class="iconfont iconguanbi" @tap="onPopupClose"></view>
				<view class="MGC-mod-wrap">
					<view class="MGC-content">
						<view class="MGC-count">
							<view class="MGC-count-item">
								<view class="itemsSum">
									<view>
										<text :class="[popupType == 'buy' ? 'color6' : 'color8']">{{ MGCpopup.name }}实时价：</text>
										<text class="color7">{{price}} RMB</text>
									</view>
								</view>
								<view class="itemsCount">
									账户余额：
									{{userInfo.price || 0}} BHT
								</view>
							</view>
				
						</view>
						<view class="MGC-group">
							<view class="uni-list">
								<view class="MGC-list-cell">
									<view class="MGC-list-cell-label">
										{{MGCpopup.name}}数量
									</view>
									<view class="MGC-list-cell-db">
										<picker @change="bindPickerChange" :value="index" :range="numsArray">
											<view class="input">{{numsArray[index]}}</view>
										</picker>
									</view>
									<view class="MGC-list-cell-button">
										BHT
									</view>
								</view>
								<view class="MGC-list-cell">
									<view class="MGC-list-cell-label">
										总金额
									</view>
									<view class="MGC-list-cell-db color7">
										{{totalNumber}}
									</view>
									<view class="MGC-list-cell-button">
										RMB
									</view>
								</view>
							</view>
							<block v-if="popupType !== 'buy'">
								<van-cell-group>
								  <van-field
									center
									clearable
									type="password"
									label="二级密码"
									:value="pwdtwo"
									title-width="140rpx"
									placeholder="请输入二级密码"
									@change="cPassword"
									:border="false">
								  </van-field>
								</van-cell-group>
							</block>
						</view>
						<view>
							<button class="MGC-submit-btn" :class="{ 'sell-btn':popupType === 'sell'}" @tap="onSubmit">{{ MGCpopup.name }}</button>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
import {regPayPassword} from '../../../common/utils/reg.js';
import { mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			price: 0,
			popupType: 'buy',
			MGCpopup: {
				name: '买入',
				title: '确定买入信息',
				btnText: '买入'
			},
			pwdtwo: '',
			
			numsArray: [],
			idArray: [],
			index: 0
		};
	},
	onShow() {},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo',
			buyInfo: 'getBuyInfo',
			sellInfo: 'getSellInfo'
		}),
		totalNumber () {
			if (!this.price) {
				return 0
			}
			return parseFloat(this.numsArray[this.index] * this.price).toFixed(3)
		}
	},
	methods: {
		...mapActions([
			'setUserInfo',
			'setBuyInfo',
			'setSellInfo'
		]),
		bindPickerChange(e) {
            this.index = e.target.value
        },
		tabType(type, price) {
			this.price = price
			this.MGCmesllnums()
			this.popupType = type
			if (type === 'buy') {
				this.MGCpopup = {
					name: '买入',
					title: '确定买入信息',
					btnText: '买入'
				};
				return;
			}
			this.MGCpopup = {
				name: '卖出',
				title: '确定卖出信息',
				btnText: '卖出'
			};
		},
		onSubmit () {
			if(this.popupType === 'buy') {
				this.MGCbuy()
				return
			}
			this.MGCsell()
		},
		MGCbuy () {
			uni.showLoading({
				title: '挂买中...'
			})
			this.$http.MGCbuy({
				id: this.idArray[this.index]
			}).then(res => {
				uni.hideLoading()
				const data = res.data
				if (data.success) {
					uni.showModal({
						title: '挂买成功',
						content: `${data.data=== 1 ? '' : '挂买且已匹配成功，'}挂买数量: ${this.numsArray[this.index]}`,
						confirmText: '查看挂买',
						cancelText: '继续购买',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/trading/record/buy/index?tab=' + (data.data - 1)
								})
							}
						}
					});
					this.buyInfo.push(this.infoObj())
					this.onPopupClose()
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		MGCsell () {
			const pwd = regPayPassword(this.pwdtwo)
			if (pwd) {
				uni.showToast({
					title: pwd, 
					icon: 'none'
				});
				return
			}
			uni.showLoading({
				title: '挂卖中...'
			})
			uni.hideKeyboard()
			this.$http.MGCsell({
				id: this.idArray[this.index],
				pwdtwo: this.pwdtwo
			}).then(res => {
				const data = res.data
				uni.hideLoading()
				if (data.success) {
					uni.showModal({
						title: '挂卖成功',
						content: `${data.data=== 1 ? '' : '挂卖且已匹配成功，'}挂卖数量: ${this.numsArray[this.index]}`,
						confirmText: '查看挂卖',
						cancelText: '继续挂卖',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/trading/record/sell/index?tab=' + (data.data - 1)
								})
							}
						}
					});
					this.sellInfo.push(this.infoObj())
					this.userInfo.price = parseFloat(this.userInfo.price - this.numsArray[this.index]).toFixed(3)
					this.onPopupClose()
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		MGCmesllnums () {
			let numsArr = []
			let idArr = []
			this.$http.MGCmesllnums().then(res => {
				const data = res.data
				if (data.success) {
					data.data.forEach(e => {
						numsArr.push(e.nums)
						idArr.push(e.id)
					})
					this.numsArray = numsArr
					this.idArray = idArr
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		onPopupClose () {
			this.$emit('emitPopupShow', false)
			this.pwdtwo = ''
		},
		cPassword(e) {
			this.pwdtwo = e.detail
		},
		infoObj () {
			return {
				bnumber: null,
				btime: null,
				code: null,
				createTime: null,
				cstate: null,
				examine: null,
				formatDate:null,
				id: null,
				kprice: 1.5,
				krprice:5,
				note:null,
				number:null,
				nums: this.numsArray[this.index],
				price: this.price,
				priceImg:null,
				state: 1,
				totalPrice: parseFloat(this.numsArray[this.index] * this.price).toFixed(3),
				type: null,
				uploadTime:null
			}
		}
	}
};
</script>

<style scoped lang="scss">
.MGC-mod {
	position: relative;
	width: 100%;
	text-align: center;
	background-color: #fff;
	.iconguanbi {
		position: absolute;
		top: 30upx;
		right: 40upx;
		z-index: 2;
		width: 60upx;
		height: 60upx;
		font-size: 44upx;
		color: #9b9b9b;
	}
	.MGC {
		&-title {
			padding: 30upx 0;
			font-size: 34upx;
			// color: #9b9b9b;
		}
		&-count {
			margin: 10upx 0;
			text-align: left;
			font-size: 26upx;
			&-item {
				padding: 0 10upx;
				.itemsSum {
					display: flex;
				}
				.itemRule {
					margin-top: 20upx;
					margin-bottom: 20upx;
					font-size: 20upx;
					line-height: 1.4;
					color: #7e7e7e;
				}
				.itemsCount {
					margin-bottom: 10upx;
					font-size: 24upx;
					color: #9b9b9b;
					.color1 {
						font-size: 28upx;
						font-size: 500;
					}
				}
				.recharge {
					margin-left: 20upx;
					color: #6eb92b;
					font-size: 600;
					text-decoration: underline;
				}
			}
		}
		&-group {
			text-align: left;
			margin-bottom: 40upx;
		}
		&-list-cell{
			display: flex;
			padding: 14upx 40upx;
			line-height: 24px;
			margin-bottom: 20upx;
			color: #333;
			background-color: transparent;
			border: 1upx solid #3E527E;
			border-radius: 10upx;
			&-label{
				width: 140upx;
				color: #1e1e1e;
			}
			&-db {flex: 1;}
			&-button {
				padding-left: 10px;
				color: #999;
			}
		}
		&-submit-btn {
			height: 80upx;
			line-height: 76upx;
			color: #fff;
			font-size: 32upx;
			border-color: #3E527E;
			background-color: #3E527E;
			border-radius: 10upx;
			box-shadow: 0 0.4upx 0.12upx #dddddd;
			&.sell-btn {
				background-color: #1dd445;
			}
		}
	}
	&-wrap {
		padding: 10upx 50upx 80upx 50upx;
	}
}
</style>
